<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"  %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
  	<div class="header">
		<div class="menu-btn">
			<div class="menu"></div>
		</div>
		<h1 class="logo">
			<a href="index.jsp"> <span>MYBLOG</span> <img src="img/logo.png">
			</a>
		</h1>
		<div class="nav">
			<a href="index" class="active">文章</a> 
			<a href="leacots">留言</a> <a href="album">相册</a> 
			<a href="about">我的文章</a>
		</div>
		<ul class="layui-nav header-down-nav">
			<li class="layui-nav-item"><a href="index" class="active">文章</a></li>
			<li class="layui-nav-item"><a href="leacots">留言</a></li>
			<li class="layui-nav-item"><a href="album.jsp">相册</a></li>
			<li class="layui-nav-item"><a href="about">我的文章</a></li>
			<li class="layui-nav-item"><a href="about">文章详情</a></li>
		</ul>
		<p class="welcome-text">
			欢迎<span class="name" style="color:red;font-size:30px;">${user.u_name }</span>来到Myblog~
		</p>
	</div>
  




<div class="amount">
				<p>
					<span class="text">阅读数：</span><span class="access">${ArticleContent.a_love }</span>
				</p>
				<p>
					<span class="text">点赞数：</span><span class="daily-record">${ArticleContent.a_pageview }</span>
				</p>
			</div>
  <div class="content whisper-content leacots-content details-content">
    <div class="cont w1000">
      <div class="whisper-list">
        <div class="item-box">
          <div class="review-version">
              <div class="form-box">
                <div class="article-cont">
                  <div class="title">
                    <h3 id="artId" data-userId="${selectUserById.u_id}" data-artId="${ArticleContent.a_id}" >${ArticleContent.a_name }</h3>
                   	 <a data-method="setTop" class="adminBtn" data-id="${selectUserById.u_id}"<%-- href="message?u_id=${SelectMessageByOther.u_id}" --%>>作者:${selectUserById.u_name }</a>
                    ${ArticleContent.a_content }
                  	
                  <div class="btn-box">
                  <a href="details?a_id=${ArticleContent.a_id -1 }"> <button class="layui-btn layui-btn-primary">上一篇</button></a>
                   
                    <a  href="details?a_id=${ArticleContent.a_id +1 }"><button class="layui-btn layui-btn-primary">下一篇</button></a>
                  </div>
                </div>
                <div class="form">
                  <form class="layui-form">
                    <div class="layui-form-item layui-form-text">
                      <div class="layui-input-block">
                        <textarea name="desc" placeholder="既然来了，就说几句" class="layui-textarea" id="text"></textarea>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block" style="text-align: right;">
                        <button class="layui-btn definite" id="queding">確定</button>
                      </div>
                    </div>
                  </form>
                </div>

                <div class="chatBox-content-demo" style="width: 200px;" >
                   
                <br><br>
                <div id="MessageContent" style="float: left;">
                
              </div>
              <div class="volume">
                全部留言 <span>10</span>
              </div>
              <div class="list-cont">
               	
                 
                 
              </div>
          </div>
        </div>
      </div>
      <div id="demo" style="text-align: center;"></div>
    </div>
  </div>
  </div>
  <script type="text/html" id="laytplCont">
    <div class="cont">
      <div class="img">
        {{#  if(d.avatar){ }}
        <img src="{{d.avatar}}" alt="">
        {{#  } else { }}
        <img src="img/header.png" alt="">
        {{# } }}
      </div>
      <div class="text">
        <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
        <p class="ct">{{d.cont}}</p>
      </div>
    </div>
  </script>
  <div class="footer-wrap">
    <div class="footer w1000">
      <div class="qrcode">
        <img src="img/erweima.jpg">
      </div>
      <div class="practice-mode">
        <img src="img/down_img.jpg">
        <div class="text">
          <h4 class="title">我的联系方式</h4>
          <p>微信<span class="WeChat">1234567890</span></p>
          <p>手机<span class="iphone">1234567890</span></p>
          <p>邮箱<span class="email">1234567890@qq.com</span></p>
        </div>
      </div>
    </div>
  </div>
  <script src="layui/layui.js" charset="utf-8"></script>
  
<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
 <script type="text/javascript">

layui.use('layer', function() { //独立版的layer无需执行这一句
	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	//触发事件
	  var active = {
	    setTop: function(){
	      var that = this; 
	      var uid = $(that).attr('data-id');
	      //多窗口模式，层叠置顶
	      layer.open({
	        type: 2 //此处以iframe举例
	        ,title: '留言'
	        ,area: ['800px', '400px']
	        ,shade: 0
	        ,maxmin: true
	        ,content: 'message?u_id='+uid
	        ,btn: [ '退出'] //只是为了演示
	        ,btn1: function(){
	        	layer.closeAll();
	        }
	       
	        /* ,zIndex: layer.zIndex //重点1 */
	        ,success: function(layero){
	          /* layer.setTop(layero); //重点2 
	        	if(uid==${user.u_id}){
	        		alert("不能给自己留言");
	        		layer.closeAll();
	        	}*/
	        }
	      });
	    }
	}
	  $('.adminBtn').on('click', function(){
		    var othis = $(this), method = othis.data('method');
		    active[method] ? active[method].call(this, othis) : '';
		  });
})
</script>
  <script type="text/javascript">
    layui.config({
      base: 'js/util/'
    }).use(['element','laypage','form','jquery','menu'],function(){
      element = layui.element,laypage = layui.laypage,form = layui.form,menu = layui.menu,$ = layui.jquery;
      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      menu.init();
      menu.submit();
    })
    $("#queding").click(function(){
    	if($('#text').val()!=null || $('#text').val()!= ''){
    		alert($('#artId').attr('data-userId'));
    		var formdata = new FormData();
    		formdata.append('c_fromuserId.u_id', $('#artId').attr('data-userId'));
			formdata.append('aId.a_id', $('#artId').attr('data-artId'));
			formdata.append('c_content', $('#text').val()); 
			console.log(formdata)
			 /*alert($('#text').val());
			alert(JSON.stringify(formdata.field)); */
			  //后台返回一串String类型的数值转成Date类型的方法
			  Date.prototype.Format = function(fmt)   
			 { 
			 //author:wangweizhen
			   var o = {   
			     "M+" : this.getMonth()+1,                 //月份   
			     "d+" : this.getDate(),                    //日
			     "h+" : this.getHours(),                   //小时   
			     "m+" : this.getMinutes(),                 //分   
			     "s+" : this.getSeconds(),                 //秒   
			     "q+" : Math.floor((this.getMonth()+3)/3), // 季度
			     "S"  : this.getMilliseconds()             //毫秒   
			   };   
			   if(/(y+)/.test(fmt))
			     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
			   for(var k in o)   
			     if(new RegExp("("+ k +")").test(fmt))   
			   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
			   return fmt;   
			 };
    		$.ajax({
    			url : 'pinglun',
				type : 'POST',
				data : formdata,
				dataType : 'JSON',
				cache : false,
				processData : false,
				contentType : false,
				success:function (resp) {
					console.log(resp)
					var html = '';
					$(resp).each(function(index,val){
						var date = new Date(val.c_reviewTime);
						date.Format("yyyy-MM-dd hh:mm:ss");
						//console.log(val);
						html+='<div >留言人：'+val.c_fromuserId.u_name+'</div>'
						+'<div>'+date.Format("yyyy-MM-dd")+'</div>'+'<div id="MessageContent">'+val.c_content+'</div>';
					});
					$('.chatBox-content-demo').empty();
					$('.chatBox-content-demo').append(html);
				}
    		})
    	 }
    	})
    	    
  </script>
      
</body>
</html>